<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Criar novo Tópico de fórum</title>
<link href="${verDetalhesLivroBean.linkCssLayoutPagina}" rel="stylesheet" type="text/css" />
<link href="CSS/styles.css" rel="stylesheet" type="text/css" />
<link href="CSS/posicaoDoMenu.css" rel="stylesheet" type="text/css" />
<script src="javascript/criarTopico.js"></script>
</h:head>
<body>
<f:metadata>
        <f:event type="preRenderView" listener="#{verDetalhesLivroBean.carregarCSSLayoutParaQualquerPagina}"/>
</f:metadata>
<f:view>
<!-- vamos primeiro definir o menu que ficará no canto esquerdo da página -->
  <div id='cssmenu'>
        <ul>
            <li class='active '><a href='index.xhtml'><span>Home</span></a></li>
            <li><h:form><h:commandLink action="#{listarPersonagensDoLivroBean.listarPersonagensLivro}"><span>Personagens</span></h:commandLink></h:form></li>
            <li><h:form><h:commandLink action ="#{verTodosOsPontosPositivosDoLivro.pegarTodosOsPontosPositivosDoLivro}"><span>Pontos positivos do livro</span></h:commandLink></h:form></li>
            <li><h:form><h:commandLink action = "#{verResenhasBean.pegarTitulosNotasDeTodasAsResenhas}"><span>Resenhas</span></h:commandLink></h:form></li>
            <li><h:form><h:commandLink action="#{verForumBean.verTopicosDoForum}"><span>Fórum</span></h:commandLink></h:form></li>
            <li><a href='paginaDeAutenticacao.xhtml'><span>Editar Site</span></a></li>
        </ul>
  </div>
  <!-- agora, vamos descrever o resto do site que não é menu. E vamos separá-los em um div  
        gigante-->
  <div id='conteudoPagina'>
    <h1>Criar tópico</h1>
    <br />
    <br />
    <h:form id = "formularionovotopico">
    <p:messages />
    <h:panelGrid columns="3">
   	  
      <h:outputText value="título do topico:"></h:outputText>
      
      <p:inputTextarea rows="1" cols="30" required="true" requiredMessage="campo obrigatório para preenchimento: título da resenha"  maxlength='40' counter="counter" counterTemplate="faltam {0} caracteres." autoResize="false" value="#{criarNovoTopicoForumBean.tituloTopicoForum}" />
      
      <h:outputText id="counter" /> 
      
      
      
            <h:outputText value="descrição:"></h:outputText>
            <h:inputTextarea  required="true" id="descricaoTopicoForum" requiredMessage="campo obrigatório para preenchimento: descrição da resenha" validatorMessage="descrição de fórum tem de ter no mínimo 20 caracteres"  cols='50' rows='4' value="#{criarNovoTopicoForumBean.descricaoTopicoForum}"><f:validateLength minimum="20" /></h:inputTextarea>
            <p:tooltip for="descricaoTopicoForum" targetPosition="topRight" value="descrição deve conter ao menos 20 dígitos" showEffect="fade" hideEffect="fade" />
      
         
      <br />
      <h:commandButton action="#{criarNovoTopicoForumBean.criarNovoTopicoDeForum}" value="criar tópico"></h:commandButton>
    </h:panelGrid>
    </h:form>
  </div>
</f:view>
</body>
</html>